<template>
    <el-container>
        <el-header>
            <el-button size="small">新建模型</el-button>
            <el-button size="small">删除模型</el-button>
        </el-header>
        <el-main>
            <el-table :data="tableData"
                      style="width: 100%">
                <el-table-column
                        type="index"
                        width="50"></el-table-column>
                <el-table-column
                        prop="modelName"
                        label="模型名称"
                >
                </el-table-column>
                <el-table-column
                        prop="modelKey"
                        label="模型key"
                >
                </el-table-column>
                <el-table-column
                        prop="lastUpdated"
                        label="最后修改日期"
                >
                    <template slot-scope="scope">
                        {{formatDate(scope.row.lastUpdated)}}
                    </template>
                </el-table-column>
                <el-table-column
                        prop="createdBy"
                        label="创建人">
                </el-table-column>
                <el-table-column
                        prop="opt"
                        width="300"
                        label="操作">
                    <template slot-scope="scope">
                        <el-button type="danger" @click="deleteModel(scope.row)" size="mini">删除</el-button>
                        <el-button size="mini" @click="edit(scope.row)">编辑</el-button>
                        <el-button @click="preview" size="mini">预览</el-button>
                        <el-button @click="design(scope.row)" size="mini">设计</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-main>
    </el-container>
</template>

<script>
    import {getProcessModelList,getModelXml} from '../../api/modeler.builder'

    export default {
        name: "ModelerManager",
        data() {
            return {
                tableData: []
            }
        },
        methods: {
            deleteModel(row) {

            },
            edit(row) {
               getModelXml(row.modelKey).then((res)=>{
                   localStorage.setItem('xml-bpmn',res.data);
                   this.$router.push("modeler-builder");
               })
            },
            design(row) {

            },
            preview() {

            }
        },
        created() {
            getProcessModelList().then((res) => {
                this.tableData = res.data;
            })
        }
    }
</script>

<style scoped>
    .el-header {
        line-height: 60px;
        text-align: right;
    }
</style>
